<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>05-userList</title>
	<link rel="stylesheet" type="text/css" href="../../bootstrap-4.2.1/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="../css/containerWrapping.css">
</head>
<body>
	<div class="container container-wrapping">
		<h3>用户记录：</h3>
		<hr><br>
		<!-- 搜索头 -->
		<div class="searchHeader row">
			<button type="button" class="btn btn-primary mr-lg-5 my-1" data-toggle="modal" data-target="#addUserModal">添加用户</button>
			<button type="button" class="btn btn-primary mr-lg-5 my-1" data-toggle="modal" data-target="#addUserListModal">批量添加用户</button>
			<!-- 搜索框 -->
		  <div class="form-group my-1 mr-sm-1">
		    <label for="forSearchContent"class="sr-only">请输入搜索内容...</label>
		    <input type="text" class="form-control" id="forSearchContent" placeholder="请输入搜索内容...">
		  </div>
		  <button type="submit" class="btn btn-primary my-1">搜索</button>
		</div><!-- searchHeader row -->
		<br>
		<!-- User记录 -->
		<div class="userListTable table-responsive">
			<table class="table table-hover text-center">
				<thead>
			    <tr class="">
			      <th scope="col">#</th>
			      <th scope="col">用户名</th>
			      <th scope="col">密码</th>
			      <th scope="col">手机号码</th>
			      <th scope="col">邮箱</th>
			      <th scope="col">性别</th>
			      <th scope="col">操作</th>
			    </tr>					
				</thead>
				<tbody>
			    <tr>
			      <th scope="row">1</th>
			      <td>Mark</td>
			      <td>钥匙</td>
			      <td>钥匙</td>
			      <td>2019-01-12</td>
			      <td>man</td>
			      <td><a href="#" class="alert-link deleteRecordA">删除</a></td>
			    </tr>				    
			    <tr>
			      <th scope="row">1</th>
			      <td>Mark</td>
			      <td>钥匙</td>
			      <td>钥匙</td>
			      <td>2019-01-12</td>
			      <td>man</td>
			      <td><a href="#" class="alert-link deleteRecordA">删除</a></td>
			    </tr>
					<tr>
			      <th scope="row">1</th>
			      <td>Mark</td>
			      <td>钥匙</td>
			      <td>钥匙</td>
			      <td>2019-01-12</td>
			      <td>man</td>
			      <td><a href="#" class="alert-link deleteRecordA">删除</a></td>
			    </tr>				
				</tbody>
			</table>
			<br>
			<!-- 分页显示 -->
			<nav aria-label="Page navigation example">
			  <ul class="pagination justify-content-end">
			    <li class="page-item">
			     	<a class="page-link" href="#" aria-label="Previous">
			        <span aria-hidden="true">&laquo;</span>
			      </a>
			    </li>
			    <li class="page-item active"><a class="page-link" href="#">1</a></li>
			    <li class="page-item"><a class="page-link" href="#">2</a></li>
			    <li class="page-item"><a class="page-link" href="#">3</a></li>
			    <li class="page-item">
			      <a class="page-link" href="#" aria-label="Next">
			        <span aria-hidden="true">&raquo;</span>
			      </a>
			    </li>
			  </ul>
			</nav>
		</div>
	</div><!-- container -->

	<!-- 添加用户Modal : addUserModal -->
	<div class="modal fade" id="addUserModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <h5 class="modal-title" id="exampleModalLabel">添加用户</h5>
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
	          <span aria-hidden="true">&times;</span>
	        </button>
	      </div>
	      <div class="modal-body">
	        <form action="" method="">
	        	<div class="form-group row">
	        		<label for="forUsername" class="col-sm-3 col-form-label text-center">用户名</label>
	        		<div class="col-sm-9">
	        			<input type="text" class="form-control" id="forUsername" placeholder="">
	        		</div>
	        	</div>
	        	<div class="form-group row">
	        		<label for="forPassword" class="col-sm-3 col-form-label text-center">密码</label>
	        		<div class="col-sm-9">
	        			<input type="text" class="form-control" id="forPassword" placeholder="123456" readonly>
	        		</div>
	        	</div>
	        	<div class="form-group row">
	        		<label for="forCellphone" class="col-sm-3 col-form-label text-center">联系方式</label>
	        		<div class="col-sm-9">
	        			<input type="text" class="form-control" id="forCellphone" placeholder="">
	        		</div>
	        	</div>
	        	<div class="form-group row">
	        		<label for="forEmail" class="col-sm-3 col-form-label text-center">邮箱</label>
	        		<div class="col-sm-9">
	        			<input type="text" class="form-control" id="forEmail" placeholder="">
	        		</div>
	        	</div>
						<div class="form-group row">
							<label class="col-sm-3"></label>
							<div class="col-sm-9">
								<div class="custom-control custom-radio custom-control-inline">
								  <input type="radio" id="forMan" name="forCheckFlag" class="custom-control-input">
								  <label class="custom-control-label" for="forMan">男</label>
								</div>
								<div class="custom-control custom-radio custom-control-inline">
								  <input type="radio" id="forWoman" name="forCheckFlag" class="custom-control-input" >
								  <label class="custom-control-label" for="forWoman">女</label>
								</div>
							</div>
						</div>
						<div class="form-group row">
							<label for="" class="col-sm-3 col-form-label text-center">个人简介</label>
							<div class="col-sm-9">
								<textarea id="forRefuseResion" name="" class="form-control"></textarea>
							</div>
						</div>
	        </form>
	      </div><!-- modal-body -->
	      <div class="modal-footer">
	        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
	        <button type="button" class="btn btn-primary">添加</button>
	      </div><!-- modal-footer -->
	    </div><!-- modal-content -->
	  </div><!-- modal-dialog -->
	</div><!-- modal fade -->

	<!-- 批量添加用户Modal : addUserListModal -->
	<div class="modal fade" id="addUserListModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <h5 class="modal-title" id="exampleModalLabel">批量添加用户</h5>
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
	          <span aria-hidden="true">&times;</span>
	        </button>
	      </div>
	      <div class="modal-body">
					<div class="custom-file">
					  <input type="file" class="custom-file-input" id="customFile">
					  <label class="custom-file-label" for="customFile">Choose file</label>
					</div>
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
	        <button type="button" class="btn btn-primary">添加</button>
	      </div><!-- modal-footer -->
	    </div><!-- modal-content -->
	  </div><!-- modal-dialog -->
	</div><!-- modal fade -->

	<script type="text/javascript" src="../../js/jquery-3.3.1.min.js"></script>
	<script type="text/javascript" src="../../bootstrap-4.2.1/js/bootstrap.min.js"></script>
</body>
</html>